<template>
  <view class="info">
    <view class="module1">
      <view class="heads">
        <image class="heads_image" :src="info.avatarUrl||'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" mode="scaleToFill"></image>
      </view>
      <view class="name">{{info.customerName}}</view>
      <view class="sex">
        <view>{{info.customerSex==1?'男':info.customerSex==2?'女':'保密'}} · {{info.customerAddress}}</view>
      </view>
      <view class="statistical">
        <view class="statistical-item">
          <view class="statistical-item-text1">{{info.custoemerFee}}
            <span class="statistical-item-text2">元</span>
          </view>
          <view class="statistical-item-text">客户业绩</view>
        </view>
        <view class="statistical-item">
          <view class="statistical-item-text1">{{info.downCustoemerFee}}
            <span class="statistical-item-text2">元</span>
          </view>
          <view class="statistical-item-text">下级客户业绩</view>
        </view>
        <!-- <view class="statistical-item">
        <view class="statistical-item-text1">3
            <span class="statistical-item-text2">时</span>
            1
            <span class="statistical-item-text2">分</span>
          </view>
          <view class="statistical-item-text"> 收益</view>
        </view> -->
      </view>
      <view class="hr"></view>
    </view>
    <view class="hr"></view>
    <view class="units">
      <!-- <view class="unit" @tap="toPhone"> -->
      <view class="unit">
        <view class="unit-left">
          <uni-icons type="phone-filled" size="20" color="#5E8AF1" />
          <span>{{info.customerPhone}}</span>
        </view>
        <!-- <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons> -->
      </view>
      <view class="unit-hr"></view>
      <view class="unit" @tap="toCompany">
        <view class="unit-left">
          <uni-icons type="smallcircle" size="20" color="#5E8AF1" />
          <span>单位信息</span>
        </view>
        <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
      </view>
      <view class="unit-hr"></view>
      <view class="unit" @tap="toAdvancedinfo">
        <view class="unit-left">
          <uni-icons type="smallcircle" size="20" color="#5E8AF1" />
          <span>高级信息</span>
        </view>
        <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
      </view>
    </view>
    <view class="hr"></view>
    <view class="module2">
      <uni-grid :column="3" :showBorder="false" :square="true" :highlight="false" @change="toView">
        <uni-grid-item :index="6">
          <view class="griditem">
            <image class="griditem-img" src="/static/CRM/CRM1.png" mode="aspectFit"></image>
            <view>关键痛点</view>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="1">
          <view class="griditem">
            <image class="griditem-img" src="/static/CRM/CRM2.png" mode="aspectFit"></image>
            <view>客户活动</view>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="2">
          <view class="griditem">
            <image class="griditem-img" src="/static/CRM/CRM3.png" mode="aspectFit"></image>
            <view>拜访记录</view>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="3">
          <view class="griditem">
            <image class="griditem-img" src="/static/CRM/CRM4.png" mode="aspectFit"></image>
            <view>关系图谱</view>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="4">
          <view class="griditem">
            <image class="griditem-img" src="/static/CRM/CRM5.png" mode="aspectFit"></image>
            <view>投保记录</view>
          </view>
        </uni-grid-item>
        <uni-grid-item :index="5">
          <view class="griditem">
            <image class="griditem-img" src="/static/CRM/CRM6.png" mode="aspectFit"></image>
            <view>经营成本</view>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      info: {},
      id: null,
    }
  },
  onLoad(options) {
    let _this = this
    _this.id = options.id

  },
  onShow() {
    let _this = this
    _this.$post('/sale/wx/customer/get_datas', { id: _this.id }, true).then(res => {
      if (res.code * 1 === 200) {
        _this.info = res.data.row[0]
        console.log(res.data.row[0]);
      }
    })
  },
  methods: {
    toPhone() {
      uni.navigateTo({
        url: '/pages/common/phone'
      });
    },
    toCompany() {
      uni.navigateTo({
        url: `/pages/common/company?id=${this.id}`
      });
    },
    toView(e) {
      let _this = this
      if (e.detail.index === 6) {
        uni.navigateTo({
          url: `/pages/CRM/info/item6?id=${_this.id}&remark=${_this.info.remark}&upCustomer=${_this.info.upCustomer}&customerQustions=${_this.info.customerQustions}&customerName=${_this.info.customerName}`
        });
        return
      }
      if (e.detail.index === 3) {
        uni.navigateTo({
          url: `/pages/CRM/info/item3?id=${_this.id}&upCustomerName=${_this.info.upCustomerName}`
        });
        return
      }
      if (e.detail.index === 1) {
        uni.navigateTo({
          url: `/pages/CRM/info/item1?id=${_this.id}&name=${_this.info.upCustomerName}`
        });
        return
      }
      uni.navigateTo({
        url: `/pages/CRM/info/item${e.detail.index}?id=${_this.id}`
      });
    },
    toAdvancedinfo() {
      let _this = this
      uni.navigateTo({
        url: `/pages/CRM/info/item0?id=${_this.id}`
      });
    },
  }
}
</script>
<style lang="scss" scoped>
.info {
  background: #f2f2f2;
  min-height: 100vh;
  padding: 10px 3vw;
}
.heads {
  width: 80px;
  height: 80px;
  padding: 1px;
  border: 1px solid #ddd;
  border-radius: 50%;
  margin: 0 auto 0 auto;
  .heads_image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.name {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
}
.sex {
  display: flex;
  justify-content: center;
  view {
    border: 1px solid #ddd;
    padding: 3px 14px;
    border-radius: 14px;
  }
  color: #858c96;
}
.module1 {
  width: 94vw;
  padding-top: 30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 3px 3px #eceaea;
}
.statistical {
  display: flex;
  &-item {
    flex: 1;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    &-text {
      padding-top: 5px;
      color: #858c96;
    }
    &-text1 {
      font-weight: bold;
      font-size: 18px;
    }
    &-text2 {
      font-weight: bold;
      font-size: 14px;
    }
  }
}
.hr {
  height: 10px;
  width: 100%;
}
.units {
  box-shadow: 0 0 3px 3px #eceaea;
  border-radius: 4px;
  overflow: hidden;
}
.unit {
  background: #fff;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-hr {
    height: 1px;
    background: #f2f2f2;
  }
  &-left {
    display: flex;
    align-items: center;
    span {
      padding: 0 10px;
      color: #808080;
    }
  }
}
.module2 {
  width: 94vw;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 3px 3px #eceaea;
}
.griditem {
  width: 100%;
  height: 100%;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  view {
    padding-top: 10px;
    font-size: 12px;
  }
  &-img {
    height: 40px;
    width: 40px;
  }
}
</style>